<template>
  <div style="background:white;height:100%;padding:20px">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-item label="电话号码">
              <a-input v-model="queryParam.mobile" placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="订单状态">
              <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="1">提现成功</a-select-option>
                <a-select-option value="0">审核中</a-select-option>
                <a-select-option value="2">提现失败</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="!advanced && 6 || 24" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="onSelect">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-table  :pagination="pagination" @change="pageShow"  class="cgmxTable" size="small" rowKey="key" :columns="columns" :dataSource="userData" :loading="tableLoading">
       <template slot="action" slot-scope="text, record">
        <a-button type="primary" @click="shEvent(record.id,1)" v-if="record.status==0">审核通过</a-button> 
        <a-button style="margin-left:10px" type="primary" @click="shnoEvent(record.id,2)" v-if="record.status==0">审核不通过</a-button>    
      </template>

      <template slot="status" slot-scope="text, record">
         <a style="color:#11C754" v-if="record.status==0">审核中</a>
        <a style="color:black" v-if="record.status==1">提现成功</a>
        <a style="color:red" v-if="record.status==2">提现失败</a>
      </template>
    </a-table>

    <a-modal title="提现金额" :visible="mimavisible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
      <a-input placeholder="请输入提现金额" v-model="price" style="margin:20px;width:170px" />
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import { STable } from '@/components'
import { getRoleList, getServiceList } from '@/api/manage'
import { loanList,withdraw,orderStatus,txFunction} from '@/api/widthdrawApi'
export default {
  name: 'TableList',
  components: {
    STable,
  },
  data() {
    return {
      confirmLoading:false,
      price:'',
      mobile:"",
      state:"",
      mimavisible:false,
      pagination: {
        total: 0,
        showTotal: (total) => `共有 ${total} 条数据`,
      },
      id:"",
      current: 1,
      pageSize: 15,
      tableLoading: false,
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
        mobile:'',status:" "
      },
      // 表头
      userData: [],
      columns: [
     
        {
          title: '用户名',
          dataIndex: 'mobile', align: 'center',
        },
        {
          title: '姓名',
          dataIndex: 'name', align: 'center',
        },
       
        {
          title: '提款金额',
          dataIndex: 'price', align: 'center',
        },
        {
          title: '状态',
          dataIndex: 'status', align: 'center', scopedSlots: { customRender: 'status' },
        },
        {
          title: '提交时间',
          dataIndex: 'createDate', align: 'center',
        },    
      
        {
          title: '操作',
          dataIndex: 'action', align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: [{ no: '1' }],
      selectedRowKeys: [],
      selectedRows: [],
      ids:[]
    }
  },
  
  created() {},
   mounted() {
    this.loanFunction()
  },
  methods: {
      onSelect(){
     this.state =this.queryParam.status
     this.mobile =this.queryParam.mobile
    
     this.loanFunction()
    },
    //筛选
    onSelectChange(selectedRowKeys,selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys,selectedRows);
      let arr = this.userData
      this.selectedRowKeys = selectedRowKeys;
      let rowsArr =selectedRows
      let selectList =[]
      for(let i=0;i<arr.length;i++){
       for(let j =0;j<rowsArr.length;j++){
         if(arr[i].id==rowsArr[j].id){
          selectList.push(arr[i].id)
         }
       }
      }
      console.log("arr",selectList)
    },
    shEvent(id,status){
      let clickNum = 0
      this.$confirm({
        title: '提示',
        content: '确认要通过审核吗?',
        onOk: () => {
          if (clickNum == 0) {
            clickNum = 1
            txFunction(status,id)
              .then((response) => {
                if (response.code == 200) {
                  let type = 'success'
                  this.$notification[type]({
                    message: '温馨提示',
                    description: '操作成功',
                    duration: 3,
                  })
                 
                 this.loanFunction()
                } else {
                  let type = 'error'
                  this.$notification[type]({
                    message: '温馨提示',
                    description: '操作失败',
                    duration: 3,
                  })
                 
                this.loanFunction()
                }
              })
              .catch((error) => {})
          } else {
            let type = 'error'
            this.$notification[type]({
              message: '温馨提示',
              description: '请不要频繁点击',
              duration: 3,
            })
          }
        },
        onCancel() {},
      })
   
   },
    shnoEvent(id,status){
      let clickNum = 0
      this.$confirm({
        title: '提示',
        content: '确认不通过审核吗?',
        onOk: () => {
          if (clickNum == 0) {
            clickNum = 1
            txFunction(status,id)
              .then((response) => {
                if (response.code == 200) {
                  let type = 'success'
                  this.$notification[type]({
                    message: '温馨提示',
                    description: '操作成功',
                    duration: 3,
                  })
                 
                 this.loanFunction()
                } else {
                  let type = 'error'
                  this.$notification[type]({
                    message: '温馨提示',
                    description: '操作失败',
                    duration: 3,
                  })
                 
                 this.loanFunction()
                }
              })
              .catch((error) => {})
          } else {
            let type = 'error'
            this.$notification[type]({
              message: '温馨提示',
              description: '请不要频繁点击',
              duration: 3,
            })
          }
        },
        onCancel() {},
      })
   
   },
   handleCancel(){
    this.mimavisible=false
    },
   handleOk(e){
     this.confirmLoading = true
      // this.ModalText = 'The modal will be closed after two seconds';
      withdraw(this.id, this.price)
        .then((response) => {
          if (response.code == 200) {
            let type = 'success'
            this.$notification[type]({
              message: '温馨提示',
              description: '操作成功',
              duration: 3,
            })
            this.mimavisible = false
            this.confirmLoading = false
            this.loanFunction()
          } else {
            let type = 'error'
            this.$notification[type]({
              message: '温馨提示',
              description: '操作失败',
              duration: 3,
            })
            this.mimavisible = false
            this.confirmLoading = false
            this.loanFunction()
          }
        })
        .catch((error) => {
          this.confirmLoading = true
          setTimeout(() => {
            this.mimavisible = false
            this.confirmLoading = false
          }, 2000)
        })
    },
    loanFunction() {
      this.tableLoading = true
      loanList(this.current, this.pageSize,this.mobile,this.state)
        .then((response) => {
          const pagination = { ...this.pagination }
          pagination.pageSize = this.pageSize
          pagination.total = response.data.total
          this.pagination = pagination
          this.userData = response.data.records
          this.pagination.current = response.data.current         
          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },

    pageShow(pagination) {
      loanList(pagination.current,pagination.pageSize,this.mobile,this.state)
        .then((response) => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.total = response.data.total
          this.pagination = pagination
          this.userData = response.data.records
          this.pagination.current = response.data.current
          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },
    tableOption() {
      if (!this.optionAlertShow) {
        this.options = {
          alert: {
            show: true,
            clear: () => {
              this.selectedRowKeys = []
            },
          },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange,
          },
        }
        this.optionAlertShow = true
      } else {
        this.options = {
          alert: false,
          rowSelection: null,
        }
        this.optionAlertShow = false
      }
    },

    handleEdit(record) {
      this.$emit('onEdit', record)
    },
  
    toggleAdvanced() {
      this.advanced = !this.advanced
    },

    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date()),
      }
    },
  },
}
</script>
<style scoped>
.laytop {
  display: flex;
  flex-direction: row;
}
</style>
